<template>
  <div class="address-form">
    <h2>填写收货地址</h2>

    <form @submit.prevent="submitForm">
      <div class="form-group">
        <label for="name">姓名</label>
        <input type="text" id="name" v-model="address.name" placeholder="请输入姓名" required />
        <span v-if="errors.name" class="error-message">{{ errors.name }}</span>
      </div>

      <div class="form-group">
        <label for="phone">手机号</label>
        <input type="tel" id="phone" v-model="address.phone" placeholder="请输入手机号" required />
        <span v-if="errors.phone" class="error-message">{{ errors.phone }}</span>
      </div>

      <div class="form-group">
        <label for="province">省</label>
        <input type="text" id="province" v-model="address.province" placeholder="请输入省份" required />
      </div>

      <div class="form-group">
        <label for="city">市</label>
        <input type="text" id="city" v-model="address.city" placeholder="请输入城市" required />
      </div>

      <div class="form-group">
        <label for="district">区/县</label>
        <input type="text" id="district" v-model="address.district" placeholder="请输入区/县" required />
      </div>

      <div class="form-group">
        <label for="street">街道地址</label>
        <input type="text" id="street" v-model="address.street" placeholder="请输入详细街道地址" required />
        <span v-if="errors.street" class="error-message">{{ errors.street }}</span>
      </div>

      <div class="form-group">
		<router-link to="/pages/mine/mine">
        <button type="submit" :disabled="isSubmitting" @click="denglu">提交</button>
		</router-link>
      </div>
    </form>

    <div v-if="submitted" class="success-message">
      地址提交成功！
    </div>
  </div>
</template>

<style scoped>
.address-form {
  max-width: 600px;
  margin: 0 auto;
  padding: 20px;
  background-color: #f9f9f9;
  border-radius: 8px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}


h2 {
  text-align: center;
  font-size: 24px;
  margin-bottom: 20px;
}

.form-group {
  margin-bottom: 15px;
}

label {
  display: block;
  font-weight: bold;
  margin-bottom: 5px;
}

input[type="text"],
input[type="tel"] {
  width: 100%;
  padding: 10px;
  border: 1px solid #ccc;
  border-radius: 5px;
  font-size: 16px;
}

input[type="text"]:focus,
input[type="tel"]:focus {
  border-color: #3498db;
  outline: none;
}

button {
  width: 100%;
  padding: 12px;
  background-color: #3498db;
  color: white;
  border: none;
  border-radius: 5px;
  font-size: 18px;
  cursor: pointer;
}

button:disabled {
  background-color: #ddd;
}

.error-message {
  color: #e74c3c;
  font-size: 14px;
  margin-top: 5px;
}

.success-message {
  margin-top: 20px;
  text-align: center;
  color: #2ecc71;
  font-size: 18px;
}
</style>
	this.$router.replace('/pages/mine/mine"')
<script>
export default {
  data() {
    return {
      address: {
        name: '',
        phone: '',
        province: '',
        city: '',
        district: '',
        street: ''
      },
      errors: {},
      isSubmitting: false,
      submitted: false
    };
  },
  methods: {
    // 提交表单
    submitForm() {
      this.errors = {}; // 清空之前的错误信息
      if (this.validateForm()) {
        this.isSubmitting = true;

        // 模拟提交
        setTimeout(() => {
          this.isSubmitting = false;
          this.submitted = true;
          this.resetForm();
        }, 1000);
      }
    },

    // 验证表单
    validateForm() {
      let valid = true;

      if (!this.address.name) {
        this.errors.name = '姓名不能为空';
        valid = false;
      }

      if (!this.address.phone) {
        this.errors.phone = '手机号不能为空';
      } else if (!/^1[3-9]\d{9}$/.test(this.address.phone)) {
        this.errors.phone = '请输入有效的手机号';
        valid = false;
      }

      if (!this.address.street) {
        this.errors.street = '街道地址不能为空';
        valid = false;
      }

      return valid;
    },

    // 重置表单
    resetForm() {
      this.address = {
        name: '',
        phone: '',
        province: '',
        city: '',
        district: '',
        street: ''
      };
    }
  }
};
</script>
